<template>
  <uni-nav-bar title="足迹" left-icon="arrowleft" @clickLeft="back()"/>
  <view class="my_foots">
    <view v-for="item in foot" class="my_foots_detail">
      <!--      <view style="position: relative">-->
      <!--        <text class="hidden_name">{{ item.productName }}</text>-->
      <!--      </view>-->
      <image id="my_foots_image" :src="item.productAvatar" class="my_foots_image"
             @click="toDetail(item.productId)"></image>
      <view class="text">{{item.productName}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      foot: [],
    };
  },
  methods: {
    toDetail(id) {
      uni.navigateTo({
        url: '/pages/product/productDetail?id=' + id
      })
    },
    back() {
      // console.log("点击了返回方法")
      uni.navigateBack({
        delta: 1
      });
    },
    //方法1  根据用户id获取用户的所有足迹
    getUserFoot() {
      uni.request({
        url: "http://localhost:9999/nbb/FootPrints/selectAll",
        header: {
          'Authorization': uni.getStorageSync('Authorization'),
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'GET',
        data: {
          userId: uni.getStorageSync('userId')
        },
        success: (res) => {
          console.log(res)
          if (res.data.code === 200) {
            this.foot = res.data.data
          } else {
            // console.log("获取足迹失败");
            console.log(res.data);
          }
        },
        fail() {
          // console.log("获取分类失败");
        }
      })
    }
  },
  created() {
    //页面初始化数据方法
    this.getUserFoot()
  },
}
</script>

<style lang="scss">

::v-deep .uni-nav-bar-text {
  font-size: 20px;
}

::v-deep .uni-navbar__content_view {
  font-size: 20px;
}

.my_foots {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;


  .my_foots_detail {
    width: 50%;
    align-content: center;
    text-align: center;
  }

  .my_foots_image {
    height: 160px;
    width: 160px;

    margin-top: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .hidden_name {
    position: absolute;
    font-size: 18px;
    z-index: 999;
    right: 65px;
    top: 10px;
  }
  .text{
    font-size: 17px;
    font-weight: 550;
  }
}
</style>
